<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moonlight Legend (French Ver.)</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

        :root {
            --main-bg: #0a0a0a;
            --text-color: #ffd700;
            --highlight-color: #f0f0f0;
            --error-color: #ff3333;
            --love-color: #ff69b4;
            --moon-color: #ffd700;
            --star-color: #87ceeb;
            --font-main: 'Share Tech Mono', monospace;
            --font-display: 'VT323', monospace;
        }

        * {
            box-sizing: border-box;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--main-bg);
            color: var(--text-color);
            font-family: var(--font-main);
            overflow: hidden;
            text-shadow: 0 0 5px var(--text-color), 0 0 10px var(--text-color);
        }

        #container {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 2vw;
        }

        /* CRT Effects */
        #container::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 2;
            background-size: 100% 3px, 4px 100%;
            pointer-events: none;
            animation: scanline 8s linear infinite;
        }

        #container::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
            z-index: 2;
            pointer-events: none;
        }

        @keyframes scanline {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 0 100%;
            }
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--main-bg);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            z-index: 100;
            font-size: 2.5em;
            font-family: var(--font-display);
            transition: opacity 1s;
        }

        #overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #overlay-cursor {
            animation: blink 1s step-end infinite;
        }

        #visuals {
            position: relative;
            z-index: 10;
            width: 100%;
            height: 100%;
            font-size: 1.1rem;
            overflow: hidden;
        }

        .line {
            display: block;
            margin-bottom: 0.5em;
            white-space: pre-wrap;
        }

        .line>.prompt {
            opacity: 0.6;
        }

        .cursor {
            display: inline-block;
            background-color: var(--text-color);
            width: 0.6em;
            height: 1.2em;
            vertical-align: middle;
            animation: blink 1s step-end infinite;
        }

        .emphasis {
            font-family: var(--font-display);
            font-size: 2.5em;
            color: var(--highlight-color);
            text-shadow: 0 0 8px var(--highlight-color);
            display: block;
            text-align: center;
            letter-spacing: 5px;
            animation: fadeIn 0.5s;
        }

        .love {
            color: var(--love-color);
            text-shadow: 0 0 8px var(--love-color);
            animation: pulse 1.5s infinite;
        }

        .moon {
            color: var(--moon-color);
            text-shadow: 0 0 15px var(--moon-color);
            animation: moonGlow 2s infinite;
        }

        .star {
            color: var(--star-color);
            text-shadow: 0 0 10px var(--star-color);
            animation: twinkle 1s infinite;
        }

        /* Animations */
        @keyframes blink {

            from,
            to {
                background-color: transparent;
            }

            50% {
                background-color: var(--text-color);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0.8;
            }
        }

        @keyframes moonGlow {
            0% {
                text-shadow: 0 0 15px var(--moon-color);
                transform: scale(1);
            }

            50% {
                text-shadow: 0 0 25px var(--moon-color), 0 0 35px var(--moon-color);
                transform: scale(1.05);
            }

            100% {
                text-shadow: 0 0 15px var(--moon-color);
                transform: scale(1);
            }
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.7;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        /* Moon and Stars Effects */
        .moon-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, var(--moon-color) 0%, rgba(255, 215, 0, 0.6) 40%, rgba(255, 215, 0, 0.2) 70%, transparent 100%);
            border-radius: 50%;
            box-shadow: 0 0 30px var(--moon-color), 0 0 60px rgba(255, 215, 0, 0.4), inset -10px -10px 0 rgba(0, 0, 0, 0.1);
            animation: moonFloat 4s ease-in-out infinite;
            z-index: 15;
        }

        .moon-element::before {
            content: '';
            position: absolute;
            top: 15%;
            left: 20%;
            width: 15px;
            height: 15px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 50%;
        }

        .moon-element::after {
            content: '';
            position: absolute;
            top: 40%;
            right: 25%;
            width: 8px;
            height: 8px;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 50%;
        }

        @keyframes moonFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .star-element {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--star-color);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--star-color);
            animation: starTwinkle 2s infinite;
            z-index: 10;
        }

        @keyframes starTwinkle {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.5);
            }
        }

        .heart-element {
            position: absolute;
            font-size: 2em;
            color: var(--love-color);
            animation: heartFloat 3s ease-in-out infinite;
            z-index: 15;
        }

        @keyframes heartFloat {
            0% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.8;
            }

            50% {
                transform: translateY(-30px) rotate(10deg);
                opacity: 1;
            }

            100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.8;
            }
        }

        .romantic-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 40%, rgba(255, 105, 180, 0.2) 100%);
            animation: romanticPulse 6s ease-in-out infinite;
            z-index: 5;
        }

        @keyframes romanticPulse {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 0.7;
            }
        }

        .french-text {
            font-style: italic;
            color: var(--love-color);
            text-shadow: 0 0 8px var(--love-color);
        }

        .midnight-effect {
            background: linear-gradient(45deg, #000428, #004e92);
            animation: midnightShimmer 3s ease-in-out;
        }

        @keyframes midnightShimmer {
            0% {
                filter: brightness(0.5);
            }

            50% {
                filter: brightness(1.2) hue-rotate(30deg);
            }

            100% {
                filter: brightness(0.8);
            }
        }
    </style>
</head>

<body>
    <div id="overlay">
        <span>Moonlight Legend (French Ver.)</span>
        <span>Click to start<span id="overlay-cursor">_</span></span>
    </div>

    <audio id="song" preload="auto">
        <source src="3882771956.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <div id="container">
        <div id="visuals"></div>
    </div>

    <script>
        const song = document.getElementById('song');
        const overlay = document.getElementById('overlay');
        const visuals = document.getElementById('visuals');
        const container = document.getElementById('container');

        const timeline = [
            // 前奏动画 (0-16秒)
            { time: 0.5, func: showTitle },
            { time: 2.0, func: createStarField },
            { time: 4.0, func: showMoonRise },
            { time: 6.0, func: showWelcomeText },
            { time: 8.0, func: createFloatingHearts },
            { time: 10.0, func: showMusicNotes },
            { time: 12.0, func: createMagicParticles },
            { time: 14.0, func: showCountdown },

            // 歌词开始 - 清除前奏动画
            { time: 15.5, func: clearIntroAnimations },
            { time: 17.5, func: clearScreen },
            { time: 16.57, func: typeLine, args: { text: "C'est difficile pour moi d'être sincère", className: 'french-text' } },
            { time: 20.85, func: typeLine, args: { text: "Mais dans mes rêves parfois je me libère", className: 'french-text' } },
            { time: 24.45, func: typeLine, args: { text: "Mes pensées se bousculent en moi souvent", className: 'french-text' } },
            { time: 28.6, func: typeLine, args: { text: "J'aimerais tant te voir maintenant", className: 'french-text', onComplete: showHearts } },

            { time: 32.65, func: typeLine, args: { text: "C'est le clair de lune qui me fait pleurer", className: 'french-text' } },
            { time: 32.65, func: showEmphasis, args: { text: "MOONLIGHT", className: 'moon', onComplete: showMoon } },
            { time: 36.61, func: typeLine, args: { text: "Il est minuit je ne peux pas t'appeler", className: 'french-text', onComplete: midnightEffect } },
            { time: 40.48, func: typeLine, args: { text: "Tellement perdue je ne sais plus quoi faire", className: 'french-text' } },
            { time: 44.53, func: typeLine, args: { text: "Mon cœur est fragile comme du verre", className: 'french-text', onComplete: showFragileHeart } },

            { time: 49.13, func: clearScreen },
            { time: 49.13, func: typeLine, args: { text: "Mais le clair de lune me fait penser à toi", className: 'french-text' } },
            { time: 56.98, func: typeLine, args: { text: "Tu le regardes autant que moi", className: 'french-text', onComplete: showRomanticOverlay } },

            { time: 64.53, func: clearScreen },
            { time: 64.53, func: typeLine, args: { text: "Les étoiles scintillent quelle merveille", className: 'french-text' } },
            { time: 64.53, func: showEmphasis, args: { text: "STARS", className: 'star', onComplete: showStars } },
            { time: 68.59, func: typeLine, args: { text: "Comme notre amour qui brille dans le ciel", className: 'french-text' } },
            { time: 68.59, func: showEmphasis, args: { text: "AMOUR", className: 'love' } },
            { time: 72.48, func: typeLine, args: { text: "Nous deux réunis sur la même planète", className: 'french-text', onComplete: showPlanetUnion } },
            { time: 76.64, func: showEmphasis, args: { text: "QUELLE ROMANCE", className: 'love' } },
            { time: 76.64, func: showEmphasis, args: { text: "QUELLE MERVEILLE", className: 'star' } },

            { time: 88.64, func: clearScreen },
            { time: 88.64, func: typeLine, args: { text: "J'aime partir avec toi en weekend", className: 'french-text' } },
            { time: 92.65, func: typeLine, args: { text: "En espérant avoir une happy end", className: 'french-text', onComplete: showHappyEnd } },
            { time: 96.5, func: typeLine, args: { text: "Pour toujours maintenant et à jamais", className: 'french-text' } },
            { time: 100.54, func: typeLine, args: { text: "De tout mon cœur je t'aimerai", className: 'french-text' } },
            { time: 100.54, func: showEmphasis, args: { text: "JE T'AIMERAI", className: 'love' } },

            { time: 104.94, func: clearScreen },
            { time: 104.94, func: typeLine, args: { text: "Je n'oublierai jamais quand je t'ai rencontré", className: 'french-text' } },
            { time: 113.09, func: typeLine, args: { text: "Ton regard sur moi s'est posé", className: 'french-text', onComplete: showEyesEffect } },

            { time: 120.58, func: clearScreen },
            { time: 120.58, func: typeLine, args: { text: "Même perdu dans un milliard d'étoiles", className: 'french-text' } },
            { time: 120.58, func: showStarField },
            { time: 124.62, func: typeLine, args: { text: "Je te retrouverai toujours sans mal", className: 'french-text' } },
            { time: 128.68, func: typeLine, args: { text: "On ne s'est pas rencontré par hasard", className: 'french-text' } },
            { time: 132.55, func: typeLine, args: { text: "Moi je ne crois pas au hasard", className: 'french-text', onComplete: showDestiny } },

            { time: 153.4, func: clearScreen },
            { time: 153.4, func: typeLine, args: { text: "Une étrange magie m'a guidée vers toi", className: 'french-text' } },
            { time: 153.4, func: showEmphasis, args: { text: "MAGIE", className: 'star', onComplete: showMagicEffect } },
            { time: 161.13, func: typeLine, args: { text: "Elle nous réunit chaque fois", className: 'french-text' } },

            { time: 168.51, func: clearScreen },
            { time: 168.51, func: typeLine, args: { text: "Les étoiles scintillent quelle merveille", className: 'french-text' } },
            { time: 172.6, func: typeLine, args: { text: "Comme notre amour qui brille dans le ciel", className: 'french-text' } },
            { time: 176.49, func: typeLine, args: { text: "Nous deux réunis sur la même planète", className: 'french-text' } },
            { time: 180.76, func: showEmphasis, args: { text: "QUELLE ROMANCE", className: 'love' } },
            { time: 182.53, func: showEmphasis, args: { text: "QUELLE MERVEILLE", className: 'star' } },
            { time: 184.53, func: showEmphasis, args: { text: "QUELLE MIRACLE", className: 'moon' } },
            { time: 186.13, func: showEmphasis, args: { text: "QUELLE MERVEILLE", className: 'star' } },
            { time: 188.42, func: showEmphasis, args: { text: "QUELLE ROMANCE", className: 'love' } },
            { time: 190.17, func: showEmphasis, args: { text: "QUELLE MERVEILLE", className: 'star', onComplete: finalMagic } },
        ];

        // Core Logic
        let currentIndex = 0;
        let animationFrameId;

        function startExperience() {
            overlay.classList.add('hidden');
            song.play().then(() => {
                animationFrameId = requestAnimationFrame(update);
            }).catch(e => {
                console.error("Audio playback failed:", e);
                overlay.innerHTML = `<span>Error: Could not play audio.</span><span>Please check the audio file.</span>`;
                overlay.classList.remove('hidden');
            });
        }

        function update() {
            const currentTime = song.currentTime;
            while (currentIndex < timeline.length && currentTime >= timeline[currentIndex].time) {
                const event = timeline[currentIndex];
                event.func(event.args || {});
                currentIndex++;
            }
            if (!song.ended) {
                animationFrameId = requestAnimationFrame(update);
            } else {
                cancelAnimationFrame(animationFrameId);
            }
        }

        overlay.addEventListener('click', startExperience, { once: true });

        // Visual Functions
        function typeLine({ text, className = '', style = {}, onComplete = null }) {
            const line = document.createElement('div');
            line.className = `line ${className}`;
            Object.assign(line.style, style);
            line.innerHTML = `<span class="prompt">🌙> </span><span class="text"></span><span class="cursor"></span>`;
            visuals.appendChild(line);

            const textSpan = line.querySelector('.text');
            const cursor = line.querySelector('.cursor');
            let i = 0;
            const typingInterval = setInterval(() => {
                if (i < text.length) {
                    textSpan.textContent += text.charAt(i);
                    i++;
                    visuals.scrollTop = visuals.scrollHeight;
                } else {
                    clearInterval(typingInterval);
                    cursor.remove();
                    if (onComplete) onComplete();
                }
            }, 60);
        }

        function showEmphasis({ text, className = '', onComplete = null }) {
            const el = document.createElement('div');
            el.className = `emphasis ${className}`;
            el.textContent = text;
            visuals.appendChild(el);
            visuals.scrollTop = visuals.scrollHeight;
            if (onComplete) onComplete();
        }

        function clearScreen() {
            // 只清除歌词相关的内容，不清除前奏动画
            const lines = visuals.querySelectorAll('.line');
            lines.forEach(line => line.remove());
            const emphasis = visuals.querySelectorAll('.emphasis:not(.intro-element)');
            emphasis.forEach(el => el.remove());
        }

        function clearEffects() {
            document.querySelectorAll('.romantic-overlay').forEach(el => el.remove());
        }

        // 前奏动画函数
        function showTitle() {
            const title = document.createElement('div');
            title.className = 'emphasis moon intro-element';
            title.textContent = 'Moonlight Legend';
            title.style.position = 'absolute';
            title.style.left = '50%';
            title.style.top = '20%';
            title.style.transform = 'translate(-50%, -50%)';
            title.style.fontSize = '3em';
            title.style.opacity = '0';
            title.style.animation = 'fadeIn 2s ease-in-out forwards';
            container.appendChild(title);

            setTimeout(() => {
                const subtitle = document.createElement('div');
                subtitle.className = 'emphasis love intro-element';
                subtitle.textContent = 'Version Française';
                subtitle.style.position = 'absolute';
                subtitle.style.left = '50%';
                subtitle.style.top = '30%';
                subtitle.style.transform = 'translate(-50%, -50%)';
                subtitle.style.fontSize = '1.5em';
                subtitle.style.opacity = '0';
                subtitle.style.animation = 'fadeIn 1.5s ease-in-out forwards';
                container.appendChild(subtitle);
            }, 1000);
        }

        function createStarField() {
            for (let i = 0; i < 30; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star-element intro-element';
                    star.style.left = `${Math.random() * 100}%`;
                    star.style.top = `${Math.random() * 100}%`;
                    star.style.animationDelay = `${Math.random() * 3}s`;
                    container.appendChild(star);
                }, i * 100);
            }
        }

        function showMoonRise() {
            const moon = document.createElement('div');
            moon.className = 'moon-element intro-element';
            moon.style.left = '85%';
            moon.style.top = '100%';
            moon.style.transition = 'top 3s ease-out';
            container.appendChild(moon);

            setTimeout(() => {
                moon.style.top = '15%';
            }, 100);
        }

        function showWelcomeText() {
            const welcome = document.createElement('div');
            welcome.className = 'line french-text intro-element';
            welcome.innerHTML = '<span class="prompt">🌙> </span>Bienvenue dans cette légende...';
            welcome.style.position = 'absolute';
            welcome.style.left = '50%';
            welcome.style.top = '70%';
            welcome.style.transform = 'translate(-50%, -50%)';
            welcome.style.animation = 'fadeIn 2s ease-in-out';
            welcome.style.opacity = '0';
            welcome.style.animationFillMode = 'forwards';
            container.appendChild(welcome);
        }

        function createFloatingHearts() {
            const hearts = ['💖', '💕', '💗', '💝', '💘'];
            for (let i = 0; i < 8; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.className = 'heart-element intro-element';
                    heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
                    heart.style.position = 'absolute';
                    heart.style.fontSize = '1.5em';
                    heart.style.left = `${Math.random() * 90 + 5}%`;
                    heart.style.top = '100%';
                    heart.style.animation = 'heartFloat 4s ease-in-out infinite';
                    heart.style.animationDelay = `${Math.random() * 2}s`;
                    heart.style.transition = 'top 3s ease-out';
                    container.appendChild(heart);

                    setTimeout(() => {
                        heart.style.top = `${Math.random() * 60 + 20}%`;
                    }, 100);
                }, i * 200);
            }
        }

        function showMusicNotes() {
            const notes = ['♪', '♫', '♬', '♩', '♭', '♯'];
            for (let i = 0; i < 12; i++) {
                setTimeout(() => {
                    const note = document.createElement('div');
                    note.className = 'intro-element';
                    note.textContent = notes[Math.floor(Math.random() * notes.length)];
                    note.style.position = 'absolute';
                    note.style.fontSize = '2em';
                    note.style.color = 'var(--star-color)';
                    note.style.left = `${Math.random() * 100}%`;
                    note.style.top = `${Math.random() * 100}%`;
                    note.style.animation = 'twinkle 2s infinite';
                    note.style.animationDelay = `${Math.random() * 2}s`;
                    container.appendChild(note);
                }, i * 150);
            }
        }

        function createMagicParticles() {
            const particles = ['✨', '🌟', '💫', '⭐', '🔮'];
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const particle = document.createElement('div');
                    particle.className = 'intro-element';
                    particle.textContent = particles[Math.floor(Math.random() * particles.length)];
                    particle.style.position = 'absolute';
                    particle.style.fontSize = '1.8em';
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100}%`;
                    particle.style.animation = 'magicFloat 3s ease-in-out infinite';
                    particle.style.animationDelay = `${Math.random() * 3}s`;
                    container.appendChild(particle);
                }, i * 100);
            }
        }

        function showCountdown() {
            const countdown = document.createElement('div');
            countdown.className = 'emphasis star intro-element';
            countdown.textContent = 'La musique commence...';
            countdown.style.position = 'absolute';
            countdown.style.left = '50%';
            countdown.style.top = '80%';
            countdown.style.transform = 'translate(-50%, -50%)';
            countdown.style.fontSize = '1.8em';
            countdown.style.animation = 'pulse 1s infinite';
            container.appendChild(countdown);
        }

        function clearIntroAnimations() {
            // 只清除带有 intro-element 类的前奏动画元素
            document.querySelectorAll('.intro-element').forEach(el => {
                // 暂停原有动画，避免与淡出效果冲突
                el.style.animationPlayState = 'paused';
                el.style.transition = 'opacity 2.5s ease-out, transform 2.5s ease-out';
                el.style.opacity = '0';

                // 为不同类型的元素应用不同的淡出效果
                if (el.classList.contains('star-element')) {
                    el.style.transform = 'scale(0)';
                } else if (el.classList.contains('moon-element')) {
                    el.style.transform = (el.style.transform || '') + ' scale(0.5) translateY(50px)';
                } else {
                    el.style.transform = (el.style.transform || '') + ' scale(0.8)';
                }

                setTimeout(() => el.remove(), 2500);
            });
        }

        // Effect Functions
        function showMoon() {
            const moon = document.createElement('div');
            moon.className = 'moon-element';
            moon.style.left = '80%';
            moon.style.top = '10%';
            container.appendChild(moon);
        }

        function showStars() {
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star-element';
                    star.style.left = `${Math.random() * 90 + 5}%`;
                    star.style.top = `${Math.random() * 70 + 10}%`;
                    container.appendChild(star);
                }, i * 100);
            }
        }

        function showHearts() {
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.className = 'heart-element';
                    heart.textContent = '💖';
                    heart.style.left = `${Math.random() * 80 + 10}%`;
                    heart.style.top = `${Math.random() * 60 + 20}%`;
                    container.appendChild(heart);
                }, i * 300);
            }
        }

        function midnightEffect() {
            container.classList.add('midnight-effect');
            setTimeout(() => {
                container.classList.remove('midnight-effect');
            }, 3000);
        }

        function showFragileHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart-element';
            heart.textContent = '💔';
            heart.style.left = '50%';
            heart.style.top = '50%';
            heart.style.transform = 'translate(-50%, -50%)';
            heart.style.fontSize = '4em';
            container.appendChild(heart);
            setTimeout(() => heart.remove(), 3000);
        }

        function showRomanticOverlay() {
            const overlay = document.createElement('div');
            overlay.className = 'romantic-overlay';
            container.appendChild(overlay);
            setTimeout(() => overlay.remove(), 6000);
        }

        function showPlanetUnion() {
            const planet = document.createElement('div');
            planet.textContent = '🌍';
            planet.style.position = 'absolute';
            planet.style.fontSize = '3em';
            planet.style.left = '50%';
            planet.style.top = '40%';
            planet.style.transform = 'translate(-50%, -50%)';
            planet.style.animation = 'pulse 2s infinite';
            container.appendChild(planet);
        }

        function showHappyEnd() {
            const elements = ['✨', '🎉', '💕', '🌟'];
            elements.forEach((emoji, i) => {
                setTimeout(() => {
                    const el = document.createElement('div');
                    el.textContent = emoji;
                    el.style.position = 'absolute';
                    el.style.fontSize = '2em';
                    el.style.left = `${20 + i * 20}%`;
                    el.style.top = `${30 + i * 10}%`;
                    el.style.animation = 'bounceIn 1s ease-out';
                    container.appendChild(el);
                }, i * 200);
            });
        }

        function showEyesEffect() {
            const eyes = document.createElement('div');
            eyes.textContent = '👀';
            eyes.style.position = 'absolute';
            eyes.style.fontSize = '3em';
            eyes.style.left = '50%';
            eyes.style.top = '30%';
            eyes.style.transform = 'translate(-50%, -50%)';
            eyes.style.animation = 'pulse 1.5s infinite';
            container.appendChild(eyes);
        }

        function showStarField() {
            for (let i = 0; i < 50; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star-element';
                    star.style.left = `${Math.random() * 100}%`;
                    star.style.top = `${Math.random() * 100}%`;
                    star.style.animationDelay = `${Math.random() * 2}s`;
                    container.appendChild(star);
                }, i * 50);
            }
        }

        function showDestiny() {
            const destiny = document.createElement('div');
            destiny.textContent = '✨ DESTIN ✨';
            destiny.className = 'emphasis star';
            destiny.style.position = 'absolute';
            destiny.style.left = '50%';
            destiny.style.top = '50%';
            destiny.style.transform = 'translate(-50%, -50%)';
            container.appendChild(destiny);
        }

        function showMagicEffect() {
            const magicElements = ['✨', '🌟', '💫', '⭐'];
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const magic = document.createElement('div');
                    magic.textContent = magicElements[Math.floor(Math.random() * magicElements.length)];
                    magic.style.position = 'absolute';
                    magic.style.fontSize = '2em';
                    magic.style.left = `${Math.random() * 100}%`;
                    magic.style.top = `${Math.random() * 100}%`;
                    magic.style.animation = 'twinkle 1s infinite';
                    magic.style.animationDelay = `${Math.random()}s`;
                    container.appendChild(magic);
                }, i * 100);
            }
        }

        function finalMagic() {
            clearScreen();
            const finalText = document.createElement('div');
            finalText.className = 'emphasis love';
            finalText.textContent = '💖 ÉTERNELLE ROMANCE 💖';
            finalText.style.position = 'absolute';
            finalText.style.left = '50%';
            finalText.style.top = '50%';
            finalText.style.transform = 'translate(-50%, -50%)';
            container.appendChild(finalText);

            // Add final magical effects
            showMagicEffect();
            showHearts();
            showStars();
        }

        // 添加额外的动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes bounceIn {
                0% {
                    transform: scale(0) rotate(0deg);
                    opacity: 0;
                }
                50% {
                    transform: scale(1.2) rotate(180deg);
                    opacity: 0.8;
                }
                100% {
                    transform: scale(1) rotate(360deg);
                    opacity: 1;
                }
            }
            
            @keyframes magicFloat {
                0%, 100% {
                    transform: translateY(0px) rotate(0deg);
                    opacity: 0.7;
                }
                33% {
                    transform: translateY(-15px) rotate(120deg);
                    opacity: 1;
                }
                66% {
                    transform: translateY(-5px) rotate(240deg);
                    opacity: 0.8;
                }
            }
            
            @keyframes gentlePulse {
                0%, 100% {
                    transform: scale(1);
                    opacity: 0.8;
                }
                50% {
                    transform: scale(1.05);
                    opacity: 1;
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>

</html>